<template>
  <el-row :gutter="20">
    <el-col :span="22" :offset="1">
      <el-descriptions class="margin-top" direction="vertical" title="专利详情" :column="3" border>
        <template slot="extra">
          <el-popover
              placement="left"
              title="联系人微信二维码"
              width="200"
              trigger="hover">
            <el-image
                style="width: 200px; height: 200px"
                :src="require('@/assets/weixin.jpg')"
                fit="fill"
                v-if="this.$route.params.patentId!=undefined&&this.$route.params.patentId!=null"
            ></el-image>
            <el-button type="primary" size="medium" slot="reference">添加微信</el-button>
          </el-popover>

        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            联系人
          </template>
          {{this.contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{this.telephone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{this.address}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-coordinate"></i>
            专利名称
          </template>
          {{this.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-folder"></i>
            专利类型
          </template>
          {{this.type}}
        </el-descriptions-item>
        <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          技术领域
        </template>
        {{this.field}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-document"></i>
            专利内容
          </template>
          {{this.content}}
        </el-descriptions-item>

      </el-descriptions>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "PatentTransaction",
  data () {
    return {
      contact:'',
      telephone:'',
      address:'',
      name:'',
      type:'',
      field:'',
      content:''
    };
  },
  created() {
    console.log(this.$route.params.patentId);
    if(this.$route.params.patentId!=undefined&&this.$route.params.patentId!=null){
      this.$axios.get('/patent/selectD/' + this.$route.params.patentId)
          .then(res => {
            this.field = res.data.data.field;
            this.content=res.data.data.introduce;
            this.$axios.get('/patent/selectP&A/' + this.$route.params.patentId)
                .then(res => {
                  this.name = res.data.data.patent.name;
                  this.type = res.data.data.patent.type;
                  res.data.data.patent.applicants.forEach(applicant=>{
                    if(applicant.hasContact===true){
                      this.contact = applicant.name;
                      this.telephone = applicant.telephone;
                      this.address = applicant.address;
                    }
                  })
                });
          });
    }

  }
}
</script>

<style scoped>

.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
</style>